<template>
  <app-navigator ref="navigator" default-path="button">
    <article class="app-home">
      <section class="app-header">
        <span @click="goHome">v3-components</span>
      </section>
      <section class="app-menu">
        <app-menu/>
      </section>
      <section class="app-content">
        <app-navigator-page/>
      </section>
    </article>
  </app-navigator>
</template>

<script lang="ts">
import {defineComponent,ref} from 'vue';

import {AppNavigator} from './components/app/app-navigator';
import {AppNavigatorPage} from './components/app/app-navigator-page';
import AppMenu from './components/app/app-menu.vue';

export default defineComponent({
  name: "app",
  components: {
    AppNavigator,
    AppNavigatorPage,
    AppMenu
  },
  setup(props, context) {
    const navigator = ref<typeof AppNavigator|null>(null)
    //不能直接使用injectAppNavigator,因为这里是AppNavigator的父组件,injectAppNavigator只能在子组件中使用

    return {
      goHome: () => {
        //navigator.value!.$._refer.methods.go('home') //需要在 useAppNavigator 通过getCurrentInstance,手动将useAppNavigator要暴露出去的通过挂载到getCurrentInstance获取到的上下文中的$ $._refer暴露出去 // 但这种方式没法获得ts的帮助
        /*
         Property '$' does not exist on type '{ use: { ref: (refName: string) => { readonly value: { state: { route: { path?: string | undefined; hash?: string | undefined; param?: {
 [x: string]: string; } | undefined; }; }; methods: { go: (path: string) => void; }; } | null; }; inject: (defaultValue?: any) => { ...; }; }; ... 48 more ...; style?: unknown; }'.
        * */
      },
      navigator
    }
  }
})
</script>

<style lang="scss" scoped>
$headSize: 60px;
$menuSize: 300px;

.app-home {
  .app-header {
    height: $headSize;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: solid 1px #ccc;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    padding: 0 40px;
    color: #42b983;
  }

  .app-menu {
    position: fixed;
    top: $headSize;
    left: 0;
    width: $menuSize;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: solid 1px #ccc;
  }

  .app-content {
    padding-left: $menuSize;
    padding-top: $headSize;
  }
}
</style>
